<template>
    <div class="batchGeneration">
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <slot></slot>
            <el-select style="margin-bottom: 10px" v-model="status" @change="statusChange" placeholder="请选择">
                <el-option v-for="(item, index) in StatusList" :key="index" :label="item.label" :value="item.value"> </el-option>
            </el-select>
            <div class="batchGeneration-table">
                <el-table :data="tableData" border v-loading="loading" style="width: 100%">
                    <el-table-column
                        v-for="(item, index) in tableList"
                        :key="index"
                        :prop="item.prop"
                        :label="item.label"
                        :align="'center'"
                    >
                        <template v-if="item.prop == 'publishTime'" scope="scope">
                            {{ getTime(scope.row.publishTime) }}
                        </template>
                        <template v-else-if="item.prop == 'deadlineTime'" scope="scope">
                            {{ getTime(scope.row.deadlineTime) }}
                        </template>
                        <!-- NORMAL -->
                        <template v-else-if="item.prop == 'warnStatus'" scope="scope">
                            {{ scope.row.warnStatus == 'NORMAL' ? '否' : '是' }}
                        </template>
                        <!-- getStatus -->
                        <template v-else-if="item.prop == 'status'" scope="scope">
                            {{ getStatus(scope.row.status) }}
                        </template>
                        <template v-else-if="item.prop == 'shelfStatus'" scope="scope">
                            {{ getShelfStatus(scope.row.shelfStatus) }}
                        </template>
                        <template v-else-if="item.prop == 'publishType'" scope="scope">
                            <div style="display: flex">
                                {{ scope.row.publishType == 'CLIP' ? '视频剪辑' : scope.row.publishType }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" :align="'center'">
                        <template slot-scope="scope">
                            <el-button style="color: green" @click="queryOrder(scope.row)" type="text" size="small">查看</el-button>

                            <el-button @click="delectItem(scope.row)" style="color: red" type="text" size="small">取消</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <div class="pagination">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page"
                        :page-sizes="[10, 20, 30]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="40"
                    >
                    </el-pagination>
                </div> -->
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button :loading="loading" type="primary" @click="generate">返 回</el-button>
            </div>
        </el-dialog>
        <el-dialog title="查看" :visible.sync="detelDialog" width="60%">
            <div style="font-size: 28px; margin-bottom: 15px">{{ DetelInfo.orderTitle }}</div>
            <div style="border-bottom: 1px solid #e8e8e8; padding-bottom: 10px">
                <div style="display: flex; align-items: center">
                    <div style="margin-right: 15px">视频剪辑</div>
                    <div style="padding: 2px 5px; background: #f59a23; color: #fff; border-radius: 5px">
                        {{ getStatus(DetelInfo.status) }}
                    </div>
                    <div style="margin-left: 30px">{{ getTime(DetelInfo.publishTime) }}发布</div>
                    <div style="margin-left: 30px">{{ getTime(DetelInfo.deadlineTime) }}截止</div>
                </div>
                <div style="color: #f8b35a; font-size: 28px">￥{{ DetelInfo.orderAmount }}</div>
            </div>
            <div style="overflow: hidden; width: 100%">
                <div style="display: flex; align-items: center; margin-top: 20px; margin-left: 15px">
                    <div style="height: 20px; width: 3px; background: #01bfbf; margin-right: 15px"></div>
                    <div>标签</div>
                </div>
                <div style="display: flex; margin-left: 20px; margin-top: 15px">
                    <div
                        v-for="(item, index) in DetelInfo.orderTips"
                        :key="index"
                        style="
                            padding: 3px 5px;
                            border-radius: 5px;
                            background: #e6fffb;
                            border: 1px solid #87e8de;
                            color: #13c2c2;
                            margin-right: 15px;
                        "
                    >
                        {{ item }}
                    </div>
                </div>
            </div>
            <div>
                <div style="display: flex; align-items: center; margin-top: 20px; margin-left: 15px">
                    <div style="height: 20px; width: 3px; background: #01bfbf; margin-right: 15px"></div>
                    <div>任务详情</div>
                </div>
                <div style="margin-left: 20px">
                    {{ DetelInfo.orderDetail }}
                </div>
            </div>
            <div>
                <div style="display: flex; align-items: center; margin-top: 20px; margin-left: 15px; margin-bottom: 10px">
                    <div style="height: 20px; width: 3px; background: #01bfbf; margin-right: 15px"></div>
                    <div>相关附件</div>
                </div>
                <div style="margin-left: 20px">
                    <div style="display: flex; margin-bottom: 10px" v-for="(item, index) in DetelInfo.attachmentFile" :key="index">
                        <div>{{ item.name }}</div>
                        <div style="color: green; cursor: pointer" @click="downLoad(item)">下载</div>
                    </div>
                </div>
            </div>
            <div>
                <div style="display: flex; align-items: center; margin-top: 20px; margin-left: 15px; margin-bottom: 10px">
                    <div style="height: 20px; width: 3px; background: #01bfbf; margin-right: 15px"></div>
                    <div>网盘链接</div>
                </div>
                <div style="margin-left: 20px">{{ DetelInfo.attachmentNetDisk }}提取码{{ DetelInfo.attachmentExtractCode }}</div>
            </div>
            <div>
                <div style="display: flex; align-items: center; margin-top: 20px; margin-left: 15px; margin-bottom: 10px">
                    <div style="height: 20px; width: 3px; background: #01bfbf; margin-right: 15px"></div>
                    <div>作品地址</div>
                </div>
                <div style="margin-left: 20px">{{ DetelInfo.worksNetDisk }}提取码{{ DetelInfo.worksExtractCode }}</div>
            </div>

            <div style="display: flex; justify-content: center; margin-top: 20px">
                <el-button @click="detelDialog = false">取 消</el-button>
                <el-button type="primary" @click="orderreject(DetelInfo)">驳回</el-button>
                <el-button type="primary" @click="orderconfirm(DetelInfo)">确认完成</el-button>
                <el-button type="primary" @click="takeDownChecks(DetelInfo)">下架</el-button>
                <el-button type="primary" @click="SetOrderInfo(DetelInfo)">编辑</el-button>
            </div>
            <span slot="footer" class="dialog-footer"> </span>
        </el-dialog>
    </div>
</template>
  <script>
import request from '../../../utils/request';
import { getListTime } from '@/utils/Time';

export default {
    name: 'batchGeneration',
    data() {
        return {
            dialogFormVisible: false,
            loading: false,
            num: 0,
            page: 1,
            pageSize: 10,
            tableData: [{ id: '250', code: '测试', time: '2024-4-30' }],
            tableList: [
                { label: '发布单号', prop: 'id' },
                { label: '发布类型', prop: 'publishType' },
                { label: '发布金额(元)', prop: 'orderAmount' },
                { label: '发布时间', prop: 'publishTime' },
                { label: '要求完成时间', prop: 'deadlineTime' },
                { label: '预警', prop: 'warnStatus' },
                { label: '发布单状态', prop: 'status' },
                { label: '上下架管理', prop: 'shelfStatus' }
            ],
            info: {},
            title: '',
            status: '',
            StatusList: [
                { label: '全部', value: 'all' },
                { label: '已接单', value: '1' },
                { label: '已完成', value: '2' }
            ],
            detelDialog: false,
            DetelInfo: {},
            item: ""
        };
    },
    methods: {
        // 确定
        confirm() {
            this.dialogFormVisible  = false;
        },
        // 删除
        delete(row) {},
        generate() { 
            this.dialogFormVisible = false;
        },
        handleSizeChange() {},
        handleCurrentChange() {},
        getlist(item, name, title) {
            this.item = item
            this.title = title;
            console.log(item);
            request({
                url: `/admin/user/v1/order-take-list`,
                method: 'post',
                params: {
                    id: item.id
                }
            }).then((res) => {
                console.log(res.data);
                // cashLogList
                this.tableData = res.data;
                this.dialogFormVisible = true;
            });
        },
        getTime(e) {
            return getListTime(e);
        },
        delectItem(e) {
            console.log(e);
            request({
                url: `/admin/release_order/v1/order-cancel`,
                method: 'post',
                params: {
                    id: e.id
                }
            }).then((res) => {
                console.log(res.data);
                this.$message.success('操作成功');

                this.getlist( this.item,"",  this.title);
            });
        },
        statusChange(e) {
            console.log(e);
        },
        getStatus(e) {
            switch (e) {
                case 'COMPLETED':
                    return '已完成';
                case 'PUBLISHED_PENDING_ORDERS':
                    return '已发布待接单';
                case 'UPLOADED_WORKS':
                    return '已上传作品';
                case 'TO_BE_AUDITED':
                    return '待审核';
                case 'REVISION_REJECTED':
                    return '驳回修改中';
                case 'Reject_pending_review':
                    return '驳回待审核';
                case 'RECEIVED_ORDERS':
                    return '已接单';
                default:
                    return e;
            }
        },
        getShelfStatus(e) {
            switch (e) {
                case 'DOWN':
                    return '下架';
                    break;
                case 'RE_UP':
                    return '等待上架';
                    break;
                case 'UP':
                    return '上架';
                    break;
                default:
                    return e;
                    break;
            }
        },
        queryOrder(e) {
            // /admin/user/v1/order-take-detail
            request({
                url: `/admin/user/v1/order-take-detail`,
                method: 'post',
                params: {
                    id: e.id
                }
            }).then((res) => {
                console.log(res);
                this.DetelInfo = res.data;
                if (this.DetelInfo.attachmentFile) {
                    this.DetelInfo.attachmentFile = JSON.parse(res.data.attachmentFile);
                }
                if (this.DetelInfo.orderTips) {
                    this.DetelInfo.orderTips = JSON.parse(res.data.orderTips);
                }
                this.detelDialog = true;
            });
        }
    }
};
</script>
  <style scoped>
.batchGeneration-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}
.batchGeneration-header > .input {
    margin-left: 10px;
    margin-right: 15px;
}
</style>